<template>
  <div style="padding: 8px 12px 0px">
    
    <div
      style="
        margin-bottom: 12px;
        padding: 16px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 15px #00000014;
      "
    >
      <Form
        layout="inline"
        :model="hooks.formState.value"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <Row :gutter="24">
          <Col v-bind="layout">
            <a-form-item label="姓名">
              <a-input v-model:value="hooks.formState.value.userName" placeholder="姓名">
              </a-input>
            </a-form-item>
          </Col>
          <Col v-bind="layout">

            <a-form-item label="年龄上限">
            <div style="display:flex">
              <div style="flex: 1 1 auto"><a-inputNumber style="width:100%" v-model:value="hooks.formState.value.ageFrom" /></div>
              <div  style="flex: 0 0 20px;text-align:center;line-height:30px;"> - </div>
              <div  style="flex: 1 1 auto"><a-inputNumber style="width:100%" v-model:value="hooks.formState.value.ageTo" /></div>
            </div>
            </a-form-item>
          </Col>
          
          <Col v-bind="layout">
            <a-form-item label="下拉">
              <a-select ref="select" >
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
                <a-select-option value="Yiminghe">yiminghe</a-select-option>
              </a-select>
            </a-form-item>
          </Col>
          <Col v-bind="layout">
            <a-form-item label="出生日期">
              <a-range-picker
                :placeholder="['出生日期下限', '出生日期上限']"
                v-model:value="hooks.formState.value.birthday"
              />
            </a-form-item>
          </Col>
          <Col v-bind="layout">
            <a-form-item label="创建日期">
              <a-range-picker
                :placeholder="['创建日期下限', '创建日期上限']"
                v-model:value="hooks.formState.value.createTime"
              />
            </a-form-item>
          </Col>
          <Col v-bind="layout">
            <a-form-item label="修改日期">
              <a-range-picker
                :placeholder="['修改日期下限', '修改日期上限']"
                v-model:value="hooks.formState.value.modifyTime"
              />
            </a-form-item>
          </Col>
          <Col v-bind="layout">
            <a-form-item>
              <a-space>
                <a-button type="primary" html-type="submit" @click="hooks.getList">
                  Search
                </a-button>
                <a-button @click="hooks.resetFrom"> Reset </a-button>
                <i
                  v-if="!debugModel"
                  @click="openDebugInfo"
                  class="iconfont icon-left"
                  style="font-size: 18px; font-weight: bold; cursor: pointer"
                ></i>
                <i
                  v-if="debugModel"
                  @click="closeDebugInfo"
                  class="iconfont icon-down"
                  style="font-size: 18px; font-weight: bold; cursor: pointer"
                ></i>
              </a-space>
            </a-form-item>
          </Col>
        </Row>
      </Form>

      <div v-if="debugModel">
        <a-alert type="warning"
          ><template #message>pagination : {{ hooks.pagination.value }}</template></a-alert
        >
        <a-alert type="warning"
          ><template #message>formState : {{ formState }}</template></a-alert
        >

        <a-alert type="warning"
          ><template #message>tableData : {{hooks.tableData.value}}</template></a-alert
        >

       
      </div>
    </div>

    <div
      style="
        padding: 4px 16px 16px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 15px #00000014;
      "
    >
      <div
        style="
          display: flex;
          margin-bottom: 2px;
          padding: 4px;
          border-radius: 8px;
        "
      >
        <div style="flex: 0 0 50%">
          <div style="line-height: 36px">
            已选中：{{ tableSelectedRowKeys.length }} 条
            <a-tooltip>
              <template #title>清空选中内容</template>
              <i
                @click="clearSelection"
                class="iconfont icon-delete"
                style="font-size: 20px; cursor: pointer"
              />
            </a-tooltip>
          </div>
        </div>
        <div style="line-height: 36px; flex: 1 1 auto; text-align: right">
          <a-button type="primary" @click="edit('')">Create</a-button>
        </div>
      </div>
      <a-table
        row-key="id"
        :dataSource="hooks.tableData.value"
        :pagination="false"
        :columns="columns"
        :loading="hooks.loading.value"
        @change="hooks.sortChange"
        :row-selection="{
          selectedRowKeys: tableSelectedRowKeys,
          onSelect: onSelect,
          onSelectAll: onSelectAll,
        }"
        size="small"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-space>
              <a-popconfirm
                title="Are you sure delete this task?"
                ok-text="Yes"
                cancel-text="No"
                @confirm="
                  () => {
                    hooks.deleteById(record.id);
                  }
                "
                ><a href="#">Delete</a>
              </a-popconfirm>

              <a-button type="link" @click="edit(record.id)">
              Edit 
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
      <a-pagination
        style="margin-top: 8px; text-align: right"
        size="small"
        v-model:current="hooks.pagination.value.current"
        v-model:page-size="hooks.pagination.value.pageSize"
        :page-size-options="hooks.pagination.value.pageSizeOptions"
        :total="hooks.pagination.value.total"
        show-size-changer
        :show-total="(total) => `Total ${hooks.pagination.value.total} items`"
        @change="hooks.paginationChange"
      >
        <template #buildOptionText="props">
          <span>{{ props.value }} 条/页 </span>
        </template>
      </a-pagination>
    </div>

    <a-modal
      :open="true"
      v-if="visible"
      title="Basic Modal"
      @ok="closeModal"
      @cancel="closeModal"
      :footer="null"
    >
      <EditForm :id="operateId" :cb="cb"></EditForm>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";


import {
  Table,
  Form,
  Divider,
  Button,
  FormItem,
  Col,
  DatePicker,
  Row,
  Checkbox,
  Select,
  Radio,
  RadioGroup,
  SelectOption,
  Modal,
  Space,
  Pagination,
  InputPassword,
  Spin,
  Input,
  Switch,
} from "ant-design-vue";

import _ from "lodash";
import useModal from "@/hooks/useModal";
import EditForm from "./EditForm.vue";
import GLOBAL_SETTING from './Constant'
import useHooks from './useHooks'



const hooks = useHooks();


const [visible, openModal, closeModal] = useModal();

const layout = _.cloneDeep(GLOBAL_SETTING.searchFormlayout);


// ==================== 调试 ====================
let debugModel = ref(false);
function openDebugInfo() {
  debugModel.value = true;
}
function closeDebugInfo() {
  debugModel.value = false;
}



// ==================== 列表表头 ====================
const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    sorter: true,
    ellipsis: true,
  },
  {
    title: "姓名",
    dataIndex: "userName",
    key: "userName",
    width: 100,
    sorter: true,
    ellipsis: true,
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
    width: 100,
    sorter: true,
    ellipsis: true,
  },
  {
    title: "生日",
    dataIndex: "birthday",
    key: "birthday",
    width: 100,
    sorter: true,
    ellipsis: true,
  },
  {
    title: "创建日期",
    dataIndex: "createTime",
    key: "createTime",
    width: 150,
    sorter: true,
    ellipsis: true,
  },
  {
    title: "修改日期",
    dataIndex: "modifyTime",
    key: "modifyTime",
    width: 150,
    sorter: true,
    ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: 150,
    ellipsis: true,
  },
];



// ==================== 表格多选框 ====================
let tableSelectedRowKeys = ref([]);

function onSelect(record: any, selected: boolean) {
  if (selected) {
    // 勾选
    tableSelectedRowKeys.value.push(record.id);
  } else {
    // 取消勾选
    if (tableSelectedRowKeys.value.length > 0) {
      let idx = tableSelectedRowKeys.value.indexOf(record.id);
      if (idx != -1) {
        tableSelectedRowKeys.value.splice(idx, 1);
      }
    }
  }
}
function onSelectAll(selected, selectionRows, changeRows) {
  // console.log('changeRows',changeRows);
  if (selected) {
    // 选中
    let selectedIds = changeRows.map((item) => {
      return item.id;
    });
    tableSelectedRowKeys.value = tableSelectedRowKeys.value.concat(selectedIds);
  }
  if (!selected) {
    // 取消选中
    if (tableSelectedRowKeys.value.length > 0) {
      for (let i = 0, j = changeRows.length; i < j; i++) {
        let idx = tableSelectedRowKeys.value.indexOf(changeRows[i].id);
        if (idx != -1) {
          tableSelectedRowKeys.value.splice(idx, 1);
        }
      }
    }
  }
}

function clearSelection() {
  tableSelectedRowKeys.value = [];
}







// =================== 编辑  ==========================
const operateId = ref("");
function edit(id:String){
  operateId.value = id;
  openModal();
}

function cb(){
  hooks.getList(false)
  closeModal();
}


</script>
<style scoped>
:deep(.ant-table-tbody tr:nth-child(2n)) {
  background-color: #fafafa;
}

:deep(:where(.css-dev-only-do-not-override-hnzzmb).ant-form-item) {
  margin-bottom: 4px;
}
</style>
